import { login as userLogin } from '@/apis';
import loginBg from '@/assets/login.svg';
import logo from '@/assets/logo.svg';
import { Button, Form, Input, Notification } from '@arco-design/web-react';
import { useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import './index.scss';
import { useParams } from '@/utils';

const userAccountValidate = [
    {
        required: true, message: '请输入登录账号'
    },
];

export default function Login() {
    const [form] = Form.useForm();
    const navigate = useNavigate();
    const param = useParams();
    const isH5 = param?.isH5 || ""
    const login = useCallback(
        () => {
            form.validate().then(values => {
                userLogin(values).then(res => {
                    console.log({isH5});
                    if (isH5 == "1") {
                        navigate('/h5/miniHome');
                        return
                    }
                    navigate('/app/home');
                    // TODO: 用户信息更新
                });
            });
        }, [form, isH5]
    );

    return (
        <div
            className="hopeto-login"
        >
            <div className='left'>
                <div className='bg-box'>
                    <img className='bg' src={loginBg} />
                </div>
            </div>
            <div className='right'>
                <div className='box'>
                    <div className='app'>
                        <img src={logo} />
                    </div>
                    <p className='title'>欢迎使用HOPE-TO智能管理系统</p>
                    <p className='sub-title'>请输入您的登录信息</p>

                    <Form
                        className='login-form'
                        name="login-form"
                        size="large"
                        form={form}
                        layout="vertical"
                    >
                        <Form.Item
                            rules={userAccountValidate}
                            field="account"
                            label="账号"
                        >
                            <Input maxLength={11} style={{ width: '100%' }} placeholder="请输入" />
                        </Form.Item>
                        <Form.Item
                            rules={[{ required: true, message: '请输入登录账号密码' }]}
                            field="passWord"
                            label="密码"
                        >
                            <Input.Password style={{ width: '100%' }} placeholder="请输入" />
                        </Form.Item>
                        <Button onClick={login} style={{ width: '100%' }} className='login-btn' type="primary">
                            进入系统
                        </Button>
                    </Form>

                    <p className='tip' onClick={() => {
                        Notification.warning({
                            title: '如何修改密码和注册账号',
                            content: '请联系系统管理员，为您修改密码或注册账号信息~'
                        })
                    }}>忘记密码？或如何注册？</p>
                </div>
            </div>
        </div>
    );
}